<template>
    <ul class="footer">
        <router-link to='/home' tag='li' active-class="footer_on">
            <i class="iconfont icon icon-shouye"></i>
            <p>首页</p>
        </router-link>
<!--        <router-link to='/design' tag='li' active-class="footer_on">
            <i class="iconfont icon icon-ico_getiaozhongxin_dingzhiguanli"></i>
            <p>定制</p>
        </router-link> -->
        <!-- <router-link to='/match?club_id=' tag='li' active-class="footer_on">
            <i class="iconfont icon icon-saishi"></i>
            <p>赛事</p>
        </router-link> -->
				<li :class="active?'footer_on':''" @click="toMatch">
					<i class="iconfont icon icon-saishi"></i>
					<p>赛事</p>
				</li>
        <router-link to='/about' tag='li' active-class="footer_on">
            <i class="iconfont icon icon-guanyu"></i>
            <p>关于</p>
        </router-link>
        <router-link to='/mine' tag='li' active-class="footer_on">
            <i class="iconfont icon icon-xiaolian"></i>
            <p>我的</p>
        </router-link>
    </ul>
</template>
<script>
export default {
	data(){
		return{
			club_id:'',
			active:false,
			title:'TISSYS网球智能服务平台'
		}
	},
	created() {
		this.checkClub()
		if(window.location.href.indexOf('match')!=-1){
			this.active = true
		}
	},
	methods:{
		toMatch(){
			let id = sessionStorage.getItem('club_id')
			let sessionID = sessionStorage.getItem('club_id')
			if(id==undefined||id==null||id==''){
				if(sessionID==undefined||sessionID==null||sessionID==''){
					id=''
				}
			}
			this.$router.push({
				path:'/match?club_id='+id
			})
		},
		checkClub(){
			var club_id = sessionStorage.getItem('club_id')
			if(club_id!='undefined'&&club_id!='null'&&window.location.href.indexOf('match')!=-1){
				this.$axios.post("mobile/matching/club",{club_id})
				.then((res)=>{
					document.title = res.data.data.club_name
				})
			}
		}
	}
}
</script>
<style lang="less" scoped>
.footer_on{
  color:#34b670
}
.icon{
  font-size: .45rem;
  /*color:#2C3E50;*/
}
.footer{
    background-color: #fff;
    position: fixed;
    bottom:0;
    width: 100%;
    height: .9rem;
    padding:0.1rem 0;
    display: flex;
    justify-content: space-around;
    box-shadow:0 0.01rem 0.02rem #888;
    li{
        p:first-child{
            font-size:.3rem;
        }
        p:last-child{
            font-size:0.26rem;
        }
    }
}
</style>
